import React from 'react';


class imgEnlarge extends React.Component {
    constructor(props) {
        super(props)
        this.state = { display: false }
    }

    enlarge() {
        console.log('11')
        this.setState({
            display: true
        })
    }
    hiddenDom() {
        console.log('1221')

        this.setState({
            // display: false
        })
    }
    render() {
        return (<div style={{ width: this.props.width + 'px', height: this.props.height, position: 'relative' }}>
            {this.state.display ? <img src={this.props.src} style={{ width: 500 + 'px', position: 'absolute', right: '-200px',top: '0', zIndex:100 }}></img> : null}
            <img src={this.props.src} style={{ width: '100%' }}
                onMouseEnter={this.enlarge.bind(this)}//当鼠标指针移动到该元素时执行
                onMouseLeave={this.hiddenDom.bind(this)}//当鼠标指针移出该元素时执行
            />
        </div>)
    }
}

imgEnlarge.defaultProps = {
    width: 200,
    height: 'auto',
}

export default imgEnlarge;